<template>
	<view>
		<view class="container" v-for="(item,index) in infoList" :key="index">
			<zy-group :title="$t('public.batchNo') + $t('public.colon') + item.batchNo" model="insideCard">
				<view class="slot">
					<view class="text">
						<text class="sub">{{$t('homepage.WarehouseManage.materialNum')}}</text>
						<view class="subContent">{{item.num}}{{$t('public.piece')}}</view>
					</view>
					<view class="text">
						<text class="sub">{{$t('public.materialCode')}}</text>
						<view class="subContent">{{item.materialCode}}</view>
					</view>
					<view class="text">
						<text class="sub">{{$t('public.materialName')}}</text>
						<view class="subContent">{{item.materialName}}</view>
					</view>
					<view class="text">
						<text class="sub">{{$t('homepage.WarehouseManage.materialAttribute')}}</text>
						<view class="subContent">{{item.attribute}}</view>
					</view>
				</view>
			</zy-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnList: [{
					text: this.$t('public.detail'),
					handle: this.goDetail,
				}],
				headList: [{
						name: this.$t('public.color'),
						key: 'color',
					},
					{
						name: this.$t('public.size'),
						key: 'size',
					}, {
						name: this.$t('public.num'),
						key: 'num',
					}
				],
				dataList: [],
			}
		},
		props: {
			infoList: {
				type: Array,
				default: []
			}
		},
		methods: {
			goDetail(item) {
				this.$refs.popup.open()
				this.$nextTick(() => {
					this.dataList = item.boxDetailList
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.slot {
		padding: 0 20rpx;
	}

	.text {
		padding: 10rpx 0;
		display: flex;
		text-align: justify;
	}

	.sub {
		text-align: left;
	}

	.subContent {
		display: flex;
		margin: auto 20rpx auto auto;
		color: #999999;
	}
</style>